<template>
  <div class="vedio">
       <span>{{title}}</span>
       <div class="cover">
           <img :src="src" alt="">
           <div class="cover_layer">
               <span class="iconfont iconshipin"></span>
           </div>
       </div>
       <span class="author">{{nickname}}  {{comment_length}}跟帖</span>
  </div>
</template>

<script>
export default {
   props:[
      'title','src','nickname','comment_length'
   ]
}
</script>

<style lang='less' scoped>
.vedio{
    padding: 20/360*100vw;
    border-bottom: 2px solid #ccc;
    span{
        font-size: 16px;
        color: #333;
        font-weight: normal;
    }
    .cover{
        // width: 340/360*100vw;
        width: 100%;
        height: 170/360*100vw;
        margin-top: 10/360*100vw;
        position: relative;
        img{
            display: block;
            width: 100%;
            height: 100%;
            // object-fit: cover;
        } 
        .cover_layer{
            width: 55/360*100vw;
            height: 55/360*100vw;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-27/360*100vw) translateY(-27/360*100vw);  
            display: flex;
            justify-content: center;
            align-items: center;
            .iconshipin{  
                font-size: 46px;
                color: #ffffff;
            }      
        }
    }
    .author {
               font-size: 14px;
               color: #868686;
           }
}

</style>